<template>
<div>
  <userItem></userItem>
  <asideRouteTeacher current-page="2-3"></asideRouteTeacher>
  <div id="main">
    <div id="selectBar">
      <el-select v-model="val" filterable  clearable placeholder="根据课程选择" >
        <el-option
            v-for="item in itemData"
            :key="item.id"
            :label="item.name"
            :value="item.name">
        </el-option>
      </el-select>
    </div>
    <div id="table">
      <el-table
          :data="tableData.filter(data => !val || data.course.toLowerCase().includes(val.toLowerCase()))"
          style="width: 100%" stripe border max-height="400" size="big" fit empty-text="暂无数据">
        <el-table-column
            label="课程名称"
            prop="course" sortable="true">
        </el-table-column>
        <el-table-column
            label="学生"
            prop="student" sortable="true" sort-by="date">
        </el-table-column>
        <el-table-column
            label="成绩"
            prop="grade" sortable="true" sort-by="number">
        </el-table-column>
      </el-table>
    </div>
    <el-button v-on:click="chart()" id="flash">可视化图表生成</el-button>
    <div id="chartplace">
      <div id="pieChart" :style="{width: '40%' , height: '350%'}"></div>
      <div id="myChart" :style="{width: '40%' , height: '350%'}"></div>

    </div>

    <div>
    </div>
  </div>
  <div>
    <el-dialog
        title="详细信息"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <span>不及格人数为:{{yaxis[0]}}</span><br>
        <span>六十分到七十分:{{yaxis[1]}}</span><br>
        <span>七十分到八十分:{{yaxis[2]}}</span><br>
        <span>八十分到九十分:{{yaxis[3]}}</span><br>
        <span>九十分以上:{{yaxis[4]}}</span>

      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</div>
</template>

<script>
import asideRouteTeacher from "../components/asideRouteTeacher";
import userItem from "../components/userItem";
import request from "../../utils/request";

export default {
  name: "gradeBrowserTeacher",
  data(){
    request.post("api/course/getCourse",sessionStorage.getItem("user")).then(res=>{
      console.log(res);
      this.itemData=res.data;
      for(let i=0;i<this.itemData.length;i++){
        console.log(this.itemData[i].name)
        request.post("api/selectandgrade/rank",this.itemData[i].name).then(res=>{
          console.log(res)
          this.rankData[i]=res.data;
          sessionStorage.setItem(this.itemData[i].name,res.data)
        })
      }
    })
    request.post("api/selectandgrade/teaquery",sessionStorage.getItem("user")).then(res=>{
      this.tableData=res.data;
    });

    return {
      val:'',
      number:[],
      options:[],
      itemData:[],
      tableData:[],
      rankData:[],
      pieData:[],
      yaxis:[0,0,0,0,0],
      dialogVisible:false,
    }
  },
  components:{
    asideRouteTeacher,
    userItem,
  },
  methods: {
    chart() {
      if (this.val === '') {
        this.$message({
          message: '请选择某一具体课程！',
          type: 'error'
        });
      } else {
        setTimeout(this.drawLine(), 3000);
        setTimeout(this.drawPie(), 3000);
        for (let i = 0; i < this.itemData.length; i++) {
          if (this.val === this.itemData[i].name) {
            this.yaxis = this.rankData[i];
            //this.dialogVisible=true;
            return;
          }
        }
      }
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'));
      // 绘制图表
      myChart.setOption({
        title: {text: '成绩分布柱状图'},
        tooltip: {},
        xAxis: {
          data: ["不及格", "60~70", "70~80", "80~90", "90以上"]
        },
        yAxis: {},
        series: [
          {
            name: '成绩',
            type: 'bar',
            data: this.getrank(),
            label: {
              show: true,
              position: "top",
            }
          },
        ]
      });
    },
    drawPie() {
      let myChart = this.$echarts.init(document.getElementById('pieChart'));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '成绩分布饼图',
        },
        series: [
          {
            type: 'pie',
            data: this.getpieRank(),
            radius:'50%',
          }
        ]
      });
    },
    getrank() {
      for (let i = 0; i < this.itemData.length; i++) {
        if (this.val === this.itemData[i].name) {
          return this.rankData[i];
        }
      }
    },
    getpieRank() {
      for (let i = 0; i < this.itemData.length; i++) {
        if (this.val === this.itemData[i].name) {
          this.pieData[0]={name:"不及格",value:this.rankData[i][0]};
          this.pieData[1]={name:"60~70",value:this.rankData[i][1]};
          this.pieData[2]={name:"70~80",value:this.rankData[i][2]};
          this.pieData[3]={name:"80~90",value:this.rankData[i][3]};
          this.pieData[4]={name:"90以上",value:this.rankData[i][4]};
          return this.pieData;
          }
        }

    },
  }
}
</script>

<style scoped>
#main{
  position:absolute;
  right: 10%;
  width: 68%;
  margin-top: 20px;
  z-index: -1;
}
#selectBar{
  float: left;
}
#table{
  margin-top: 50px;
}
#flash{
  float:right;
}
#chartplace{
  margin-top: 50px;
}
#pieChart{
  float: right;
}
</style>